<template>
	<view class="recommendContainer">
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banners">
			<swiper-item>
				<view class="swiper-item">
					<!-- 这里的图片需要自己去网易严选自己取用,这里搞三张过来就行 -->
					<image class="banner-img"
						src="https://yanxuan.nosdn.127.net/2688fcd19a4a2d1b0c0f3419ea6d6e96.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="banner-img"
						src="https://yanxuan.nosdn.127.net/b0d56ac88250e863bc4563144a6afc31.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="banner-img"
						src="https://yanxuan.nosdn.127.net/c47c8cedb1535ec39b7329b1220aff3d.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- policyList三个图标区域 -->
		<view class="policyList">
			<view class="policyItem" v-for="(item, index) in indexData.policyDescList" :key="index">
				<image class="policyImg" :src="item.icon"></image>
				<text class="policyDesc">{{item.desc}}</text>
			</view>
		</view>
	  <!-- 图形化导航区域 -->
		<view class="kingKongList" v-if="indexData.kingKongModule">
			<view class="kingKongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image class="kingKongImg" :src="item.picUrl"></image>
				<text class="kingKongContent">{{item.text}}</text>
			</view>
		</view>
		<!-- categoryModule 分类区 -->
		<view class="categoryModuleContainer">
			<view class="categoryItem" v-for="item in indexData.categoryModule" :key="item.titlePicUrl">
				<image class="titlePic" :src="item.titlePicUrl"></image>
				<scroll-view class="shopListScroll" scroll-x="true"  :key="shopItem.id"  enable-flex>
					<view class="shopItem" v-for="shopItem in item.itemList" :key="shopItem.showPicUrl">
						<image class="shopImg" :src="shopItem.showPicUrl"></image>
						<view class="shopContent">{{shopItem.name}}</view>
					</view>
					<view class="shopItem more">
						查看更多>>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入vuex里面的内容
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				//从vuex里面取出 indexData 赋值给本页面的indexData
				indexData: state => state.home.indexData
			})
		},
		mounted() {
			// console.log("在组件里面取数据    ",this.indexData)
		},
		methods: {

		}
	}
</script>

<style lang="stylus">
	.recommendContainer {
		.swiper-item {
			width 100%;
			height 350upx;
			.banner-img {
				width 100%;
				height 100%
			}
		}

		.policyList {
			display flex;
			justify-content space-between;
			.policyItem {
				.policyImg {
					width 32upx;
					height 32upx;
					/*图标相对父元素中间对齐*/
					vertical-align middle;
				}
				.policyDesc {
					font-size 24upx;
					text-align center;
					/*文字相对父元素中间对齐 */
					vertical-align middle;
				}
			}
		}
		.kingKongList{
			display flex;
		  flex-wrap wrap;
			.kingKongItem{
				width 20%;
				display flex;
				//改变主轴
				flex-direction column;
				align-items center;
				.kingKongImg{
					width 110upx;
					height 110upx;
					margin 20upx 0;
				}
				.kingKongContent{
					font-size 26upx;
				}
			}
		}
		//categoryModule 分类区样式
		.categoryModuleContainer{
			.categoryItem{
				margin-bottom 20upx;
				//标题图片
				.titlePic{
					width 100%;
					height 370upx;
					margin 10upx 0;
				}
				//滚动轴
				.shopListScroll{
					//不换行---解决横向滚动条的问题
					white-space nowrap;
					.shopItem{
						width 200upx;
						display inline-block;
						vertical-align top;
						margin-right 20upx;
						
						.shopImg{
							width 200upx;
							height 200upx;
							background-color #EEEEEE;
						}
						.shopContent{
							font-size 26upx;
							white-space pre-wrap;
							display -webkit-box;
							-webkit-line-clamp 2;
							-webkit-box-orient vertical;
							text-overflow ellipsis;
						}
						&.more{
							width 200upx;
							height 200upx;
							line-height 200upx
							background-color #eee;
							font-size 28upx;
							text-align center;
						}
					}
				}
				
			}
		}
	}
</style>
